<template>
  <div class="container">
    <!-- <h1>登录界面</h1> -->
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <h1 id="title">EasyBrain</h1>
      </el-col>
    </el-row>
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <div class="form">
          <br />
          <el-row class="row-md" justify="start">
            <el-col :span="7" :offset="2">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabChange">
                <el-tab-pane label="登录" name="first"></el-tab-pane>
                <el-tab-pane label="注册" name="second"></el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
          <el-row class="row-md" justify="center">
            <el-col :span="20">
              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" style="width:215px;"/>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-input v-model="form.code" style="width: 105px" />&nbsp;&nbsp;
                  <el-button type="default">发送验证码</el-button>
                </el-form-item>
                <el-form-item>
                  <a href="/login">密码登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="primary" @click="submitForm(ruleFormRef)">登 录</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'


const ruleFormRef = ref<FormInstance>()
const form = reactive({
  email: "",
  code: ""
})
var checkEmail = (rule:any, value:any, cb:any) => {
  //验证邮箱的正则表达式
  const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if (regEmail.test(value)) {
    //合法的邮箱
    return cb();
  }
  cb(new Error("请输入合法的邮箱"));
}
const rules = reactive<FormRules>({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      validator: checkEmail,
      min: 9,
      max: 18,
      message: "邮箱格式错误",
      trigger: "blur",
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'change' },
  ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log('此处打印一下获取的数据', formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      router.push({
        path: "/home",
        name: "home"
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const activeName = "first"
const router = useRouter()
const tabChange: any = (tab: TabsPaneContext, event: Event) => {
  if (tab.paneName == "first") {
    router.push({
      path: "/",
      name: "login"
    })
  }
  else if (tab.paneName == "second") {
    router.push({
      path: "/register",
      name: "register"
    })
  }
}
const ChangeLogin: any = () => {
  router.push({
    path: "/login",
    name: "login2"
  })
}
</script>
